{extend name="public/base" /}

{block name="style"}
<style>

    .cate-cont {
        background-color: #f3f4f5;
    }

    .mb-item-cont {
        margin-right: 0.84rem;
    }

    .mb-item-form {
        width: 356px;
        height: 236px;
        background: 0;
        position: relative;
        transition: transform .2s ease-out;
        margin-top: 2rem;
    }

    .mb-item-form:hover {
        transform: scale(1.04);
    }

    .mb-item-info {
        width: 356px;
    }

    .mb-item-win {
        width: 367px;
        height: 240px;
        padding: 6px;
        background: url("/static/images/mbitem_bg01.png") no-repeat;
        position: absolute;
        left: -6px;
        top: -6px;
    }

    .mb-model-pc {
        position: absolute;
        overflow: hidden;
        width: 357px;
        height: 216px;
        left: 5px;
        top: 17px;
        border: 0;
    }

    .mb-model-pc-img {
        width: 100%;
    }

    .type-row {
        float: left;
        width: 100%;
        margin: 0.45rem 0px;
    }
    .type-row ul li {
        float: left;
        list-style: none;
        padding: 0 .5rem;
        color: #73777a;
    }
    .type-row ul li:hover {
        cursor: pointer;
        color: #00c1de;
    }
    .color-block {
        float: left;
        margin: 0.2rem 0 0 0.6rem;
    }
    .color-block li {
        width: 3rem;
        height: 1.0rem;
        transition: width .2s;
    }
    .color-block li:hover {
        width: 4rem;
    }
    .cur {
        background-color: #00c1de;
        color: #FFFFFF!important;
    }
    .color-block li.cur {
        width: 4rem;
    }

</style>
{/block}

{block name="content"}
<!--cate-->

<form method="post" id="typeForm">
    <div class="py-4 cate-cont">
        <div class="container">


            <div class="type-row" id="cate-list">
                <ul>
                    <li class="cate_id_0" onclick="filter('cate_id',0)">不限</li>
                    {volist name="cateList" id="item"}
                    <li class="cate_id_{$item.id}" onclick="filter('cate_id',{$item.id})">{$item.name}</li>
                    {/volist}
                </ul>
            </div>


            <div class="type-row" id="type-list">
                <ul>
                    <li class="type_id_0" onclick="filter('type_id',0)">不限</li>
                    <li class="type_id_1" onclick="filter('type_id',1)">电脑站</li>
                    <li class="type_id_2" onclick="filter('type_id',2)">手机站</li>
                </ul>
            </div>


            <div class="type-row" id="color-list">
                <ul>
                    <li class="color_id_0" onclick="filter('color_id',0)">不限</li>
                    <div class="color-block">
                        {volist name="colorList" id="item"}
                        <li style="background-color: #{$item.value}" class="color_id_{$item.id}" onclick="filter('color_id',{$item.id})"></li>
                        {/volist}
                    </div>
                </ul>
            </div>

            <input type="hidden" name="cate_id" id="cate_id" value="100">
            <input type="hidden" name="type_id" id="type_id" value="0">
            <input type="hidden" name="color_id" id="color_id" value="0">

            <div class="clearfix"></div>

        </div>
</div>
</form>

<!--tempItem-->
<div class="container">
    <div class="d-flex flex-row flex-wrap justify-content-start mt-2" id="tempList">

        {volist name="datas" id="item"}
        <div class="mb-item-cont">
            <div class="mb-item-form">
                <div class="mb-item-win">
                    <div class="mb-model-pc">
                        <a href="{$item.temp_link}" target="_blank" >
                            <img class="mb-model-pc-img" src="/uploads/{$item.temp_img}">
                        </a>
                    </div>
                </div>
            </div>
            <div class="text-secondary mt-1 d-flex px-2 mb-item-info">
                <span>编号: PG00{$item.id}</span>
                <span class="ml-3">价格: {$item.temp_price}</span>
                <span class="ml-auto bd-highlight">
                    <svg class="icon" aria-hidden="true">
                        {eq name="item.type_id" value="1"}
                        <use xlink:href="#icon-computer"></use>
                        {else/}
                        <use xlink:href="#icon-mobile"></use>
                        {/eq}
                    </svg>
                </span>
            </div>
        </div>
        {/volist}

    </div>

    <div class="mt-5">
        <nav aria-label="Page navigation">
            {$datas|raw}
        </nav>
    </div>

</div>

{/block}

{block name="script"}
<script>

    function getUrl() {
        var url = document.URL.match(/[?&][^?&]+=[^?&]+/g);
        if (url===null) {
            return ''
        }else{
            for (var i = 0; i<url.length; i++) {
                url[i]=url[i].slice(1)
            }
        }
        return url;
    }
    function filter(name,val){
        var getString=getUrl();
        var oldUrl=document.URL;
        var newUrl;
        if (getString.length>0) {
            var repeat=true;
            for (var i = 0; i < getString.length; i++) {
                if (getString[i].indexOf(name)>=0) {
                    repeat=false;
                    newUrl=oldUrl.replace(getString[i],name+'='+val);
                }
            }
            if(repeat){
                newUrl=oldUrl+'&'+name+'='+val
            }
        }else{
            newUrl=oldUrl+'?'+name+'='+val;
        }
        window.location=newUrl;
    }
    $(function(){
        var getQueryString=getUrl();
        for (var i=0; i<getQueryString.length; i++) {
            val = getQueryString[i].split('=');
            if (val[1]!==0) {
                $('.'+val[0]+'_0').removeClass('cur')
            }
            if(val[1]==0){
                $('.'+val[0]+'_0').addClass('cur')
            }
            $('.'+val[0]+'_'+val[1]).addClass('cur')
        }
    });

</script>
{/block}